<template>
    <div class="bemusicmen">
        <Header v-bind:isBack="isBack" v-bind:title="title"></Header>
        <div class="contents bg-f flex-column" v-if="music.code==4">
            <div class="top">
                <p class="fs-32 center">请输入你想要申请的艺人名称</p>
                <div class="space-between">
                    <div class="bg-d center">
                        <input type="text" name="" id="" placeholder="请输入艺人名称" v-model="name">
                    </div>
                    <p class="color-r fs-32" @click="sure">确定</p>
                </div>
            </div>
            <div class="center">
                <p class="fs-32">联系客服：<a href="tel:3534653463">3534653463</a></p>
            </div>
        </div>
        <div class="isget bg-f" v-else>
            <div class="inshe" v-if="music.code==3">
                <p class="fs-36">信息已提交，正在审核中~</p>
                <p class="color-6">一般审核时间为1-3天</p>
            </div>
            <div class="ismusicmen" v-if="music.code==1">
                <img :src="musicmen" alt="">
                <p class="fs-36">您已是音乐人</p>
                <p>请前往音乐<a href="" class="color-active">网页端</a>的创作者中心，发布歌曲/专辑</p>
            </div>
            <div class="inshe" v-if="music.code==2">
                <p class="fs-36">很遗憾，审核没有通过</p>
                <p class="color-6">{{music.message}}</p>
                <div class="rebtn bg-p color-f fs-32 center" @click="reapply">重新申请</div>
            </div>
        </div>
        <div class="logout center" @touchmove.prevent v-if="reinput">
            <div class="content">
                <p class="fs-36 text ">此艺名已录取，请重新输入</p>
                <div class="color-f fs-36 center" @click="ok">确定</div>
            </div>
        </div>
        
    </div>
</template>
<script>
export default {
    data(){
        return{
            isBack:true,
            title:'申请成为音乐人',
            reinput:false,
            name:'',
            isget:false,
            music:"",
            musicmen:require("../../assets/account/ismusicmen.png"),
        }
    },
    created(){
        this.isGetSinger()
    },
    methods:{
        isGetSinger(){
            let url = this.$host1 + `home/isGetSinger`
            this.$axios.post(url).then(res => {
                console.log(res)
                //return
                if (res.status == 200) {
                    let resData = res.data;
                    this.music=resData
                }
            }).catch(() => {
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        sure(){
            if(this.name==''){
                this.AlertWin("艺人名称不可为空！");
                return
            }
            var data={
                singer_artistic_name:this.name
            }
            let url = this.$host1 + `home/isUsedByArtisticName`
            this.$axios.post(url,data).then(res => {
                //console.log(res)
                //return
                if (res.status == 200) {
                    let resData = res.data;
                    if (resData.code == 200) {
                        //this.userinfo=resData.data
                        this.AlertWin('恭喜，艺人名称可用！');
                        setTimeout(()=>{
                            this.$router.push('/musicmenlivein')
                        })
                        sessionStorage.setItem('name',this.name)
                    } else{
                        this.reinput=true
                    }
                }
            }).catch(() => {
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        reapply(){
            this.music.code=4
        },
        ok(){
            this.reinput=false
        }
    }
}
</script>
<style lang="scss" scoped>
.bemusicmen{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    .contents{
        margin-top: 1rem;
        width: 100%;
        height: calc(100% - 1rem);
        padding: 1.5rem 0.24rem 0.3rem 0.24rem;
        box-sizing: border-box;
        .top{
            .space-between{
                margin-top: 0.4rem;
                .bg-d{
                    width: 6rem;
                    height: 0.8rem;
                    border-radius: 0.4rem;
                    input{
                        width:3rem;
                        height: 0.5rem;
                        background: none;
                        text-align: center;
                    }
                }
            }
        }
    }
    .isget{
       margin-top: 1rem;
        width: 100%;
        height: calc(100% - 1rem);
        padding: 1.5rem 0.24rem 0.3rem 0.24rem;
        box-sizing: border-box;
        .inshe{
            margin-top: 0.5rem;
            text-align: center;
            .color-6{
                margin-top: 0.2rem
            }
            .rebtn{
                margin-top: 3rem;
                width: 100%;
                height: 0.9rem;
                border-radius: 0.45rem;
            }
        } 
        .ismusicmen{
            margin-top: 0.5rem;
            text-align: center;
            img{
                width: 1.37rem;
                height: 1.37rem;
                margin: 0 auto;
            }
            .fs-36{
                margin: 1rem auto 0.2rem;
            }
        }
    }
    .logout{
        .content{
            text-align: center;
            .text{
                margin-top: 0.9rem;
            }
        }
        .color-f{
            width: 2.05rem;
            height: 0.6rem;
            background-color: #c1c1c1;
            border-radius: 0.3rem;
            margin: 0.4rem auto 0;
        }
    }
}
</style>